<template>
  <div v-loading="loading" class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title"> <i class="el-icon-search" />搜索栏 </template>
        <div class="head-container">
          <el-form class="searchform" :model="params" :inline="true" size="mini" label-width="auto">
            <el-row>
              <el-col :span="8">
                <el-form-item label="沃尔玛品牌号">
                  <el-select v-model="params.channelId" placeholder="选择渠道" size="mini" style="width: 200px" @change="changeChannel">
                    <el-option v-for="channelObj in channelOptions" :key="channelObj.channelId" :label="channelObj.channelName" :value="channelObj.channelId" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="渠道品牌号">
                  <el-input v-model="params.channelBrandId" size="mini" placeholder="输入搜索" clearable style="width: 200px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="渠道品牌名称">
                  <el-input v-model="params.channelBrandName" size="mini" placeholder="输入搜索" clearable style="width: 200px" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item>
                  <el-button size="mini" type="primary" style="float: right; margin-left: 0px" round icon="el-icon-refresh" @click="resetForm">重置</el-button>
                  <el-button size="mini" type="primary" style="float: right; margin-left: 0px" round icon="el-icon-search" @click="toQuery">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div style="padding-top: 10px">
      <el-button
        v-if="params.channelId === '12' && hasRole(['R017001', 'R017007', 'R017012'])"
        size="mini"
        type="primary"
        style="float: right; margin-bottom: 5px; margin-left: 0px"
        round
        @click="doAddWNDJBrandName"
      >
        新增WMDJ品牌
      </el-button>
      <el-button
        v-if="params.channelId === '06' && params.channelId && hasRole(['R017001', 'R017007'])"
        size="mini"
        type="primary"
        style="float: right; margin-bottom: 5px; margin-left: 0px"
        round
        @click="doSync2"
      >
        增量拉取品牌
      </el-button>
      <el-button
        v-if="params.channelId === '07' && params.channelId && hasRole(['R017001', 'R017007'])"
        size="mini"
        type="primary"
        style="float: right; margin-bottom: 5px; margin-left: 0px"
        round
        @click="doSync"
      >
        同步渠道信息
      </el-button>
      <el-table ref="dataTab" :data="data" stripe size="mini" border style="width: 100%">
        <!-- <el-table-column :reserve-selection="true" type="selection" align="center" width="55" /> -->
        <el-table-column :show-overflow-tooltip="true" label="渠道品牌号" prop="channelBrandId" :width="colWidths.channelBrandId" />
        <el-table-column :show-overflow-tooltip="true" label="渠道品牌名称" prop="channelBrandName" :width="colWidths.channelBrandName" />
        <el-table-column :show-overflow-tooltip="true" label="创建时间" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="创建人" prop="updateBy" :width="colWidths.updateBy" />
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        :page-sizes="[10, 50, 100, 500]"
        style="margin-top: 8px"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <el-dialog
      v-loading="loading"
      :visible.sync="brandNameDialog"
      title="新增WMDJ品牌"
      :close-on-click-modal="false"
      width="280px"
      append-to-body
      @close="brandNameCancel"
    >
      <div>
        <el-input v-model="wmdjBrandName" size="mini" clearable style="width: 230px" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="text" @click="brandNameCancel">取消</el-button>
        <el-button size="mini" type="primary" @click="doSubmitAddWNDJBrandName">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" width="400px">
      <el-form ref="ruleForm" label-width="auto">
        <el-form-item label="品牌名称">
          <!-- <el-input v-model="newBrandName" type="textarea" placeholder="请输入品牌名称，多个回车换行隔开" @input="handleInput" /> -->
          <el-input v-model="newBrandName" placeholder="请输入品牌名称" />
          <label style="color: red">*请尽量输入完整的品牌名称</label>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit">同 步</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { batchAddWMDJBrand, syncChannleData } from '@/api/coi/mapping/brand'
import initData from '@/api/coi/itemCenterInitData'
import { getChannelOptions, pullJDChannelBrand } from '@/api/coi/category/category'
import { parseTime } from '@/utils/index'
import { messageShowTool } from '@/utils/messageUtil'

export default {
  mixins: [initData],
  data() {
    return {
      activeName: '1',
      loading: false,
      brandNameDialog: false,
      wmdjBrandName: '',
      channelOptions: [],
      dialogVisible: false,
      newBrandName: ''
    }
  },
  created() {
    this.$nextTick(() => {
      this.initChannelOptions()
    })
  },
  methods: {
    parseTime,
    messageShowTool,
    beforeInit() {
      this.url = process.env.VUE_APP_BASE_API6 + '/mapping/brand/queryChannelBrandList'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    // 初始化channelOptions
    initChannelOptions() {
      getChannelOptions().then((res) => {
        if (res && res.result) {
          this.channelOptions = res.result
        }
      })
    },
    // 渠道变更
    changeChannel() {
      if (this.params.channelId) {
        this.toQuery()
      }
    },
    // 查询
    toQuery() {
      this.page = 1
      this.currentPage = 1
      this.init()
      this.doClearSelection()
    },
    // 查询栏重置触发
    resetForm() {
      this.params = {}
      this.syncTime = []
      this.toQuery()
    },
    // 清空选择项
    doClearSelection() {
      this.mappingList = []
      this.$refs.dataTab.clearSelection()
    },
    doSync2() {
      this.newBrandName = ''
      this.dialogVisible = true
    },
    // 同步渠道信息
    doSync() {
      this.$confirm('确认触发当前所选渠道品牌数据同步操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        syncChannleData(this.params.channelId).then(
          (_) => {
            this.messageShowTool('成功触发同步操作，稍后刷新页面查看结果。', 'success')
            this.loading = false
          },
          (_error) => {
            this.loading = false
          }
        )
      })
    },
    onsubmit() {
      this.$confirm('确认同步当前渠道品牌数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        pullJDChannelBrand({ newBrandName: this.newBrandName, channelId: this.params.channelId }).then(
          (res) => {
            if (res.result) {
              this.dialogVisible = false
              this.messageShowTool('成功触发同步操作，稍后刷新页面查看结果。', 'success')
              this.toQuery()
            } else {
              this.messageShowTool('没有找到该品牌的对应数据，请重新输入', 'warning')
            }
          },
          (error) => {
            console.log(error)
            this.dialogVisible = false
          }
        )
      })
    },
    brandNameCancel() {
      this.wmdjBrandName = ''
      this.brandNameDialog = false
    },
    doAddWNDJBrandName() {
      this.brandNameDialog = true
    },
    doSubmitAddWNDJBrandName() {
      if (this.wmdjBrandName && this.wmdjBrandName !== '') {
        this.loading = true
        batchAddWMDJBrand({ brandNameList: [this.wmdjBrandName] }).then(
          (_) => {
            this.messageShowTool('新增成功。', 'success')
            this.brandNameCancel()
            this.loading = false
          },
          (_error) => {
            this.loading = false
          }
        )
      } else {
        this.messageShowTool('请填写有效的品牌名称。', 'error')
      }
    }
  }
}
</script>
